<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
	
	<title>Tarjetas</title>
	<link href="css/tarjetas.css" rel="stylesheet" type="text/css"></link>
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/tarjetas.js" type="text/javascript"></script>
</head>

<body>
	<select id="tipos">
		<option value="todos">Todos</option>
	</select>
	
	<div id="tt">
		<div id="palabra"></div>
		<div id="traduccion"></div>
	</div>

	<a href="javascript:previous()" id="siguiente" disabled="true">anterior</a>
	<a href="javascript:next()" id="anterior" disabled="true">siguiente</a>

	<script>
		tarjetas = new Tarjetas("js/data.xml");

		tarjetas.tipos().each (function(t) {
			$("tipos").options.add(new Option(t, t));
		});

		function next() {
			if (tarjetas.hasNext()) {
				set(tarjetas.next());
			}
		}
		
	 	function previous() {
			 if (tarjetas.hasPrevious()) {
				set(tarjetas.previous());
			 }
		}

		function set(t) {
			$("tt").childElements()[0].innerHTML = t.palabra;
			$("tt").childElements()[1].innerHTML = t.traduccion;
		}

	</script>
</body>

</html>
